<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'testExt.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	    <!-- Ext -->
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
    <style type="text/css">
        html, body {
            font: normal 12px verdana;
            margin: 0;
            padding: 0;
            border: 0 none;
            overflow: hidden;
            height: 100%;
        }
        .empty .x-panel-body {
            padding-top:20px;
            text-align:center;
            font-style:italic;
            color: gray;
            font-size:11px;
        }
    </style>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/bootstrap.js"></script>
	

  </head>
  
  
  <body>
    This is my JSP page. <br>
    <div id="tree-example"></div>
    <script type="text/javascript">
    Ext.require([
                 'Ext.tree.*',
                 'Ext.data.*'
             ]);

             Ext.onReady(function() {

                 var store = Ext.create('Ext.data.TreeStore', {
                     proxy: {
                         type: 'ajax',
                         url: 'get-nodes.php',
                         extraParams: {
                             isXml: true
                         },
                         reader: {
                             type: 'xml',
                             root: 'nodes',
                             record: 'node'
                         }
                     },
                     sorters: [{
                         property: 'leaf',
                         direction: 'ASC'
                     },{
                         property: 'text',
                         direction: 'ASC'
                     }],
                     root: {
                         text: 'Ext JS',
                         id: 'src',
                         expanded: true
                     }
                 });

                 // create the Tree
                 var tree = Ext.create('Ext.tree.Panel', {
                     store: store,
                     hideHeaders: true,
                     rootVisible: true,
                     viewConfig: {
                         plugins: [{
                             ptype: 'treeviewdragdrop'
                         }]
                     },
                     height: 350,
                     width: 400,
                     title: 'Directory Listing',
                     renderTo: 'tree-example',
                     collapsible: true
                 });
             });
    </script>
  </body>
</html>
